// Carousel.tsx
import React, { useState, useEffect, useCallback, useRef } from 'react';
import './Index.css';
// 引入本地图片
import img1 from '../../assets/Img/1.png';
import img2 from '../../assets/Img/2.png';
import img3 from '../../assets/Img/3.png';
import img4 from '../../assets/Img/4.png';
import img5 from '../../assets/Img/5.png';

// 定义轮播图图片的类型接口
interface CarouselImage {
    id: number;       // 图片唯一标识
    src: string;      // 图片路径
    alt: string;      // 图片描述（用于无障碍访问）
}

const Index: React.FC = () => {
    // 轮播图图片数据
    const images: CarouselImage[] = [
        { id: 1, src: img1, alt: 'Slide 1' },
        { id: 2, src: img2, alt: 'Slide 2' },
        { id: 3, src: img3, alt: 'Slide 3' },
        { id: 4, src: img4, alt: 'Slide 4' },
        { id: 5, src: img5, alt: 'Slide 5' }
    ];

    // 状态管理
    const [activeIndex, setActiveIndex] = useState(0);              // 当前活动图片的索引
    const [transitionEnabled, setTransitionEnabled] = useState(true); // 是否启用过渡动画
    const [touchPosition, setTouchPosition] = useState<number | null>(null); // 触摸起始位置

    // 自动播放控制
    const autoPlayRef = useRef<NodeJS.Timeout>();  // 自动播放定时器引用
    const containerRef = useRef<HTMLDivElement>(null); // 容器DOM引用

    // 处理无限循环：在首尾各添加一张图片（首部添加最后一张，尾部添加第一张）
    const items = [images[images.length - 1], ...images, images[0]];

    // 自动播放效果
    useEffect(() => {
        // 设置定时器，每3秒切换到下一张
        autoPlayRef.current = setInterval(() => {
            handleNext();
        }, 3000);

        // 组件卸载时清除定时器
        return () => {
            if (autoPlayRef.current) {
                clearInterval(autoPlayRef.current);
            }
        };
    }, [activeIndex]);  // 依赖activeIndex以确保每次变化后重新设置定时器

    // 触摸开始事件处理
    const handleTouchStart = (e: React.TouchEvent) => {
        // 记录触摸起始位置的X坐标
        const touchDown = e.touches[0].clientX;
        setTouchPosition(touchDown);
    };

    // 触摸移动事件处理
    const handleTouchMove = useCallback((e: React.TouchEvent) => {
        if (touchPosition === null) return;

        // 计算触摸移动距离
        const currentTouch = e.touches[0].clientX;
        const diff = touchPosition - currentTouch;

        // 向右滑动（显示上一张）
        if (diff > 5) {
            handleNext();
        }

        // 向左滑动（显示下一张）
        if (diff < -5) {
            handlePrev();
        }

        // 重置触摸位置
        setTouchPosition(null);
    }, [touchPosition]);

    // 切换到下一张图片
    const handleNext = useCallback(() => {
        // 如果当前不是最后一张
        if (activeIndex <= images.length) {
            setActiveIndex(prev => prev + 1);
        }

        // 如果是最后一张（实际上是克隆的第一张）
        if (activeIndex === images.length) {
            setTimeout(() => {
                // 禁用过渡效果，直接跳转到真实第一张
                setTransitionEnabled(false);
                setActiveIndex(0);
                // 短暂延迟后重新启用过渡效果
                setTimeout(() => setTransitionEnabled(true), 50);
            }, 500); // 等待过渡动画完成
        }
    }, [activeIndex]);

    // 切换到上一张图片
    const handlePrev = useCallback(() => {
        // 如果当前不是第一张
        if (activeIndex >= 0) {
            setActiveIndex(prev => prev - 1);
        }

        // 如果是第一张（实际上是克隆的最后一张）
        if (activeIndex === 0) {
            setTimeout(() => {
                // 禁用过渡效果，直接跳转到真实最后一张
                setTransitionEnabled(false);
                setActiveIndex(images.length);
                // 短暂延迟后重新启用过渡效果
                setTimeout(() => setTransitionEnabled(true), 50);
            }, 500); // 等待过渡动画完成
        }
    }, [activeIndex]);

    // 自适应容器宽度（保持16:10宽高比）
    useEffect(() => {
        const updateWidth = () => {
            if (containerRef.current) {
                const width = containerRef.current.offsetWidth;
                containerRef.current.style.height = `${width * 0.6}px`;
            }
        };

        updateWidth(); // 初始化设置
        window.addEventListener('resize', updateWidth); // 窗口大小变化时更新
        return () => window.removeEventListener('resize', updateWidth); // 清除监听
    }, []);

    return (
        <div
            className="carousel-container"
            ref={containerRef}
            onTouchStart={handleTouchStart}
            onTouchMove={handleTouchMove}
        >
            {/* 轮播图轨道 */}
            <div
                className="carousel-track"
                style={{
                    // 根据当前索引计算位移
                    transform: `translateX(-${(activeIndex + 1) * 100}%)`,
                    // 控制是否启用过渡效果
                    transition: transitionEnabled ? 'transform 0.5s ease' : 'none'
                }}
            >
                {/* 渲染所有图片（包括首尾克隆的图片） */}
                {items.map((img, index) => (
                    <div
                        key={index}
                        className="carousel-slide"
                        style={{ backgroundImage: `url(${img.src})` }}
                        role="img"
                        aria-label={img.alt}  // 无障碍访问
                    />
                ))}
            </div>

            {/* 指示器（下方小圆点） */}
            <div className="carousel-indicators">
                {images.map((_, index) => (
                    <div
                        key={index}
                        className={`indicator ${index === activeIndex ? 'active' : ''}`}
                        onClick={() => setActiveIndex(index)}  // 点击跳转到对应图片
                    />
                ))}
            </div>
        </div>
    );
};

export default Index;